import React, { Component } from 'react'

export default class HeaderTodo extends Component {
  handleKeyup = (e) => {
    const { keyCode, target } = e
    if (keyCode !== 13) return
    if (!target.value.trim().length) return alert('内容不能为空')
    this.props.addItem(target.value)
    target.value = ''
  }

  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          onKeyUp={this.handleKeyup}
        />
      </header>
    )
  }
}
